<template>
	<view class="pageContent">
		<view class="setSwi">
			<view class="houseMain">
				<view class="houseFace">人脸开门<text class="houseFaceSta" v-if="formData.faceSwitch==2 || 0"
						@click="goDoorList">查看审核结果</text></view>
				<view class="houseMsg" v-if="formData.faceSwitch==0">打开上传人脸照片</view>
				<view class="houseMsg" v-if="formData.faceSwitch==1">上传人脸照校验中</view>
				<view class="houseMsg" v-if="formData.faceSwitch==2">请再上传人脸照片</view>
				<view class="houseMsg" v-if="formData.faceSwitch==3">正在使用人脸识别开门</view>
			</view>
			<!-- 人脸同步状态0:未录入1:待审核2:审核失败3:审核通过 -->
			<view class="houseRight">
				<!-- <view >{{formData.faceSwitch}}</view> -->
				<view v-if="formData.faceSwitch==1" @click="imagePhoto">待审核</view>
				<view class="houseRightFail" v-if="formData.faceSwitch==2">审核失败</view>
				<!-- <view v-if="formData.faceSwitch==3">审核通过</view> -->
				<image class="switchImg" v-if="formData.faceSwitch!=1 && formData.faceSwitch!=3"
					:src="images +'/switchOff.png'" mode="widthFix" @click="imagePhoto" />
				<image class="switchImg" v-if="formData.faceSwitch==3" :src="images +'/switchOn.png'" mode="widthFix"
					@click="faceOff" />
				<!--        <switch class="switchTab" v-if="formData.faceSwitch!=1 && formData.faceSwitch!=1" color="#1086FF" :checked="formData.faceSta" @change="inputChange"
          id="faceSwitch" disable="true">
        </switch> -->
			</view>
		</view>
		<view class="setSwi">
			<view class="houseMain">
				<view class="houseFace">访客通知</view>
				<view class="houseMsg">关闭将接收不到远程通知</view>
			</view>
			<view class="houseRight">
				<image class="switchImg" v-if="formData.visitorNotifySwitch==0" :src="images +'/switchOff.png'"
					mode="widthFix" @click="notifySwi(1)" />
				<image class="switchImg" v-if="formData.visitorNotifySwitch==1" :src="images +'/switchOn.png'"
					mode="widthFix" @click="notifySwi(0)" />
				<!--       <switch class="switchTab" color="#1086FF" :checked="formData.visitorNotifySwitch" @change="inputChangeNot"
          id="visitorNotifySwitch">
        </switch> -->
			</view>
		</view>
		<view class="setAbou" @click="aboutUs">
			<view class="houseFace">关于我们</view>
			<view class="rightArrow"></view>
		</view>

		<button class="btOne btBottom" @click="loginOut">退出登录</button>
	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				formData: {
					visitorNotifySwitch: 0,
					faceSta: 0,
				},
				room: '',
				faceUrl: '',
			}
		},

		onLoad() {
			var room = wx.getStorageSync('room');
			this.room = room;

		},

		onShow() {
			this.systemSetting();
		},

		methods: {
			loginOut() {
				// wx.removeStorageSync('token');
				var userInfo = wx.getStorageSync('userInfo'); //缓存头像信息，传递给下一个页面，然后在保存本地
				wx.clearStorageSync();
				// wx.setStorageSync('userInfo');
				wx.closeSocket()
				wx.redirectTo({
					url: '/pages/index/login' + '?userInfo=' + JSON.stringify(userInfo)
				})
			},

			inputChange(e) {
				var value = e.detail.value
				// console.warn('value', value)
			},
			inputChangeNot(e) {
				var value = e.detail.value
				this.formData.visitorNotifySwitch = value
				this.notifySwitch();
			},

			notifySwi(index) {
				this.notifySwitch(index);
			},
			addMem() {
				wx.navigateTo({
					url: '/pages/subMe/addMem/main'
				})
			},

			//访客通知
			async notifySwitch(index) {
				var self = this;
				var url = '/UserServer/owner/info/notifySwitch?'
				var roomId = this.room.roomId;
				var notifySwitch = index;
				var params = {
					notifySwitch: notifySwitch,
					roomId: roomId,
				}
				var paramUrl = util.stringifyQs(params)
				url = url + paramUrl
				var options = {
					url,
					params: {},
					method: 'PUT',
				}
				//订阅微信通知消息
				if (index == 1) {
					await this.onSub()
				}
				//监听消息订阅成功后，才进行通知消息接口的切换请求
				var param = await util.requestPro(options)
				console.log('param', param)
				await this.systemSetting();
				console.log('>>>systemSetting')
			},

			//人脸开门
			async faceSwitch(params, type = 0) {
				var url = '/UserServer/owner/info/faceSwitch?'
				var paramUrl = util.stringifyQs(params)
				url = url + paramUrl
				var options = {
					url,
					params: {},
					method: 'PUT',
				}
				var param = await util.requestPro(options)
				console.log('faceSwitch', param)
				await this.systemSetting();
				if (type == 0) {
					wx.showToast({
						title: "图片上传成功",
						icon: 'none'
					});
				}
				if (type == 1) {
					wx.showToast({
						title: "人脸开门功能已关闭",
						icon: 'none'
					});
				}
			},

			async systemSetting() {
				var url = '/UserServer/owner/info/systemSetting?'
				var params = {
					roomId: this.room.roomId,
				}
				var options = {
					url,
					params,
				}
				var param = await util.requestPro(options)
				console.log('systemSetting', param)
				this.formData = param
				//3:审核通过
				if (param.faceSwitch == 3) {
					this.formData.faceSta = true
				} else {
					this.formData.faceSta = false
				}
			},

			//图片上传
			imagePhoto() {
				var self = this;
				var token = wx.getStorageSync('token');
				wx.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						const tempFilePaths = res.tempFilePaths
						var src = res.tempFilePaths[0];
						wx.navigateTo({
							url: '/pagesA/index/imageCropper' + '?src=' + src + '&type=1'
						})

					},
					fail(res) {
						console.warn('fail', res)
						//重置勾选状态
						self.formData.faceSta = false;
					},
					complete(res) {
						console.warn('complete', res)
					}
				})
			},

			//关闭人脸上传开关
			faceOff() {
				var params = {
					faceSwitch: 0,
					faceUrl: '',
				}
				this.faceSwitch(params, 1);
			},

			//订阅消息
			onSub() {
				return new Promise((resolve, reject) => {
					wx.requestSubscribeMessage({
						tmplIds: config.tmplIds,
						success(res) {
							console.warn('onSub', res)
							var value = Object.values(res);
							if (value.includes('accept')) {
								resolve()
							}
						},
						fail(res) {
							console.warn('fail=res', res)
							if (res.errCode == 20004) {
								// 用户关闭了主开关，无法进行订阅
								wx.showToast({
									title: "请在设置中打开通知管理开关",
									icon: 'none',
									duration: 2000,
								});
							}
						},
					})
				})
			},

			goDoorList(index) {
				wx.navigateTo({
					url: '/pages/index/doorList'
				})
			},
			aboutUs() {
				wx.navigateTo({
					url: '/pagesA/index/aboutUs'
				})
			},

		},

	}
</script>


<style scoped>
	.pageContent {

		padding: 50rpx 30rpx 0rpx 30rpx;
	}

	.setSwi {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 0rpx 60rpx 0rpx;
	}

	.houseRight {
		display: flex;
		align-items: center;
	}

	.houseRightFail {
		font-size: 30rpx;
		color: #FF6E5D;
	}

	.switchImg {
		height: 72rpx;
		width: 72rpx;
		margin-left: 10rpx;
	}

	.switchTab {
		display: inline-block;
		/* scale修改switch大小，默认margin-right: -30rpx */
		transform: scale(0.66);
		margin-right: -30rpx;
	}

	.houseMain {
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.houseFace {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
		padding-bottom: 6rpx;
	}

	.houseFaceSta {
		background: #FF6E5D;
		border-radius: 32rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		padding: 2rpx 10rpx 2rpx 10rpx;
		margin: 0rpx 0rpx 0rpx 10rpx;
	}

	.houseMsg {
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
		line-height: 30rpx;
	}

	.setAbou {
		position: relative;
		padding: 20rpx 0rpx 20rpx 0rpx;
	}

	.rightArrow {
		height: 24rpx;
		width: 24rpx;
		top: 25rpx;
		right: 10rpx;
	}

	.houseTil {
		display: flex;
		justify-content: space-between;
		padding: 14rpx 14rpx 14rpx 14rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #030303;
		border-bottom: 0.3rpx solid #E7E7E7;
	}

	.houseNo {
		padding: 14rpx 14rpx 14rpx 14rpx;
		font-size: 32rpx;
		color: #030303;
		border-bottom: 0.3rpx solid #E7E7E7;
	}

	.houseMes {
		display: flex;
		padding: 14rpx 0rpx 14rpx 0rpx;
	}

	.houseMesIt {
		height: 40rpx;
		line-height: 40rpx;
		background: #F2F8FF;
		border-radius: 6rpx;
		border: 1px solid #BCDEFF;
		color: #519AEE;
		font-size: 28rpx;
		margin-right: 10rpx;
		padding: 0rpx 14rpx 0rpx 14rpx;
	}

	.handler {
		display: flex;
		justify-content: flex-end;
		padding: 14rpx 14rpx 20rpx 14rpx;
		width: 100%;
	}

	.handlerCha {
		height: 60rpx;
		width: 160rpx;
		line-height: 60rpx;
		background: #DDDDDD;
		border-radius: 30rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
	}

	.handlerBlu {
		background: #1086FF;
		margin-left: 18rpx;
	}

	.btBottom {
		position: fixed;
		bottom: 220rpx;
		left: 50%;
		margin-left: -300rpx;
		width: 600rpx;
	}
</style>
